import React, { Component } from 'react';
import './nav-selection.css';
import { Toast } from 'antd-mobile';

class NaveSelection extends Component {

    constructor(props){

        super(props);

        let action ={
            home:'',
            category:'',
            find:'',
            user:''
        }

        action[this.props.action] = 'selections-action';

        this.state = {
            action:action
        }


    }

    toHome(e){
        this.props.history.push('/');
        return;
    }

    toUser(e){
        this.props.history.push('/user');
        return;
    }

    toCategory(e){
        Toast.info('敬请期待', 1);
        return;
    }

    toFind(e){
        Toast.info('敬请期待', 1);
        return;
    }


    render() {
        return (
            <div className="nav-selection">
                <ul className="selections-box">
                    <li onClick={(e)=>this.toHome(e)} className={this.state.action['home']}>
                        <div>
                            <i className="icon iconfont icon-home "></i>
                            <span>首页</span>
                        </div>
                    </li>
                    <li onClick={(e)=>{this.toCategory(e)}} className={this.state.action['category']}>
                        <div>
                            <i className="icon iconfont icon-apps "></i>
                            <span>分类</span>
                        </div>
                    </li>
                    <li onClick={(e)=>{this.toFind(e)}} className={this.state.action['find']}>
                        <div>
                            <i className="icon iconfont icon-explore "></i>
                            <span>单词</span>
                        </div>
                    </li>
                    <li onClick={(e)=>this.toUser(e)} className={this.state.action['user']}>
                        <div>
                            <i className="icon iconfont icon-my "></i>
                            <span>我的</span>
                        </div>
                    </li>
                </ul>
            </div> 
        );
    }
}

export default NaveSelection;